<template>
  <div class="admin-layout">
    <el-container style="min-height: 100vh;">
      <el-aside width="220px" class="admin-aside">
        <div class="admin-logo">管理后台</div>
        <el-menu :default-active="$route.name" router @select="handleMenuSelect">
          <el-menu-item index="AdminDashboard">
            <el-icon><User /></el-icon>
            <span>教师管理</span>
          </el-menu-item>
          <el-menu-item index="ClassroomApproval">
            <el-icon><List /></el-icon>
            <span>教室借用审批</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="admin-header">
          <div class="admin-header-title">平台管理中心</div>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </el-header>
        <el-main class="admin-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/authStore';
import { User, List } from '@element-plus/icons-vue';

const router = useRouter();
const authStore = useAuthStore();

const logout = () => {
  authStore.logout();
  router.push({ name: 'Login' });
};

const handleMenuSelect = (index) => {
  router.push({ name: index });
};
</script>

<style scoped>
.admin-layout {
  background: linear-gradient(135deg, #e0e7ef 60%, #f8fafc 100%);
  height: 100vh;
  overflow: hidden;
}
.admin-aside {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 100vh;
  z-index: 10;
  background: rgba(30,41,59,0.92);
  color: #fff;
  min-height: 100vh;
  box-shadow: 2px 0 16px rgba(30,58,138,0.10);
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
  backdrop-filter: blur(8px);
  border-right: 1.5px solid rgba(255,255,255,0.10);
}
.admin-logo {
  font-size: 1.7rem;
  font-weight: bold;
  padding: 40px 0 32px 32px;
  letter-spacing: 2.5px;
  color: #fff;
  text-shadow: 0 4px 12px rgba(30,58,138,0.18);
}
.el-menu {
  background: transparent;
  border-right: none;
}
.el-menu-item {
  color: #fff;
  font-size: 1.13rem;
  border-radius: 14px;
  margin: 8px 10px;
  transition: background 0.18s, color 0.18s;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.el-menu-item:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.90) 60%, rgba(96,165,250,0.90) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,58,138,0.10);
}
.el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(37,99,235,0.90) 60%, rgba(96,165,250,0.90) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,58,138,0.10);
}
.el-menu-item .el-icon {
  font-size: 1.3rem;
  margin-right: 12px;
}
.admin-header {
  position: fixed;
  left: 220px;
  top: 0;
  right: 0;
  height: 72px;
  z-index: 9;
  background: rgba(255,255,255,0.92);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px;
  box-shadow: 0 2px 16px rgba(30,58,138,0.06);
  border-top-left-radius: 36px;
  backdrop-filter: blur(6px);
}
.admin-header-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 1.2px;
}
.admin-main {
  margin-left: 220px;
  margin-top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 44px 36px;
  background: rgba(244,246,250,0.92);
  min-height: calc(100vh - 72px);
  border-bottom-left-radius: 36px;
  backdrop-filter: blur(4px);
}
.el-button[type="danger"] {
  border-radius: 22px;
  font-weight: 700;
  padding: 10px 28px;
  background: linear-gradient(90deg,#f43f5e,#f59e42);
  border: none;
  color: #fff;
  transition: all 0.18s;
  font-size: 1.08rem;
  box-shadow: 0 2px 8px #f43f5e22;
}
.el-button[type="danger"]:hover {
  filter: brightness(1.10) saturate(1.2);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 18px #f43f5e33;
}
</style>
